<template>
  <div class="postspublish">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章发布</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card" style="margin-top:20px">
      <el-form ref="form" :model="postform" label-width="80px">
        <el-form-item label="标题:">
          <el-input v-model="postform.title"></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-radio-group v-model="postform.type">
            <el-radio :label="1">文章</el-radio>
            <el-radio :label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容:">
          <!-- 文件上传组件 -->
          <el-upload class="upload-demo" v-show="postform.type==2" action :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频文件</div>
          </el-upload>
          <!-- 添加富文本框 -->
          <VueEditor :config="config" v-show="postform.type==1" />
        </el-form-item>
        <!-- 全选复选框 -->
        <el-form-item label="栏目:">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="postform.categories" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="cate in cateList" :label="cate.id" :key="cate.id">{{cate.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 图片上传 -->
        <el-form-item label="封面:">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-button type="primary" @click="publishpost">发布文章</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css";
import { getCateList } from "@/apis/cate.js";
export default {
  data() {
    return {
      // 复选框
      isIndeterminate: true,
      checkAll: false,
      checkedCities: ["上海", "北京"], //当前复选框组件中默认被选中的值
      cateList: [], //复选框组件的数据源
      postform: {
        title: "",
        content: "",
        categories: [],
        cover: [],
        type: 1,
      },
      fileList: [],
      config: {
        // 上传图片的配置
        uploadImage: {
          url: "http://localhost:3000/upload",
          name: "file",
          headers: {
            Authorization: localStorage.getItem("heima_toutiao_houtai"),
          },
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            insert("http://localhost:3000" + res.data.url);
          },
        },

        // 上传视频的配置
        uploadVideo: {
          url: "http://localhost:3000/upload",
          name: "file",
          uploadSuccess(res, insert) {
            insert("http://localhost:3000" + res.data.url);
          },
        },
      },

      // 图片上传
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  components: {
    VueEditor,
  },
  methods: {
    publishpost() {
      // 细节,后台接口明确的告诉我们,分类数据要以对象的形式生成成员进行传递
      this.postform.categories = this.postform.categories.map((value) => {
        return { id: value };
      });
      console.log(this.postform);
    },
    // 复选框
    handleCheckAllChange(val) {
      // this.checkedCities = val ? cityOptions : [];
      // this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      // let checkedCount = value.length;
      // this.checkAll = checkedCount === this.cities.length;
      // this.isIndeterminate =
      //   checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 图片上传
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      // this.dialogImageUrl = file.url;
      // this.dialogVisible = true;
    },
  },
  async mounted() {
    let res = await getCateList();
    console.log(res);
    this.cateList = res.data.data.splice(1);
  },
};
</script>

<style lang="less" scoped>
</style>